<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API服务调用统计 - 用户地址数据系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 16px;
        }
        
        .nav-links {
            display: flex;
            margin-bottom: 20px;
            gap: 15px;
        }
        
        .nav-links a {
            color: #3498db;
            text-decoration: none;
            padding: 8px 0;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        
        .nav-links a:hover {
            border-bottom-color: #3498db;
        }
        
        .nav-links a.active {
            font-weight: 500;
            border-bottom-color: #3498db;
        }
        
        .time-filter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .time-buttons {
            display: flex;
            gap: 10px;
        }
        
        .time-button {
            padding: 8px 15px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .time-button:hover {
            background-color: #f0f0f0;
        }
        
        .time-button.active {
            background-color: #3498db;
            color: white;
            border-color: #3498db;
        }
        
        .refresh-button {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 8px 15px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .refresh-button:hover {
            background-color: #f0f0f0;
        }
        
        .last-updated {
            font-size: 13px;
            color: #95a5a6;
            margin-left: 10px;
        }
        
        .overview-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 992px) {
            .overview-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 576px) {
            .overview-cards {
                grid-template-columns: 1fr;
            }
        }
        
        .overview-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        
        .overview-card-small {
            padding: 15px;
        }
        
        .overview-card-title {
            color: #7f8c8d;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .overview-card-value {
            font-size: 28px;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .overview-card-percent {
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .percent-up {
            color: #2ecc71;
        }
        
        .percent-down {
            color: #e74c3c;
        }
        
        .chart-cards {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        @media (max-width: 992px) {
            .chart-cards {
                grid-template-columns: 1fr;
            }
        }
        
        .chart-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
        }
        
        .chart-title {
            font-size: 16px;
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 15px;
        }
        
        .chart-container {
            height: 300px;
            margin-bottom: 10px;
            position: relative;
            width: 100%;
        }
        
        .chart-placeholder {
            background-color: #f8f9fa;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #95a5a6;
            border-radius: 4px;
        }
        
        .pie-chart-container {
            height: 250px;
            margin-bottom: 10px;
        }
        
        .table-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .api-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .api-table th {
            text-align: left;
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            color: #7f8c8d;
            font-weight: 500;
        }
        
        .api-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
        }
        
        .api-table tr:last-child td {
            border-bottom: none;
        }
        
        .api-table tbody tr:hover {
            background-color: #f8f9fa;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: white;
            display: inline-block;
        }
        
        .status-success {
            background-color: #2ecc71;
        }
        
        .status-error {
            background-color: #e74c3c;
        }
        
        .status-warning {
            background-color: #f39c12;
        }
        
        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        @media (max-width: 992px) {
            .two-columns {
                grid-template-columns: 1fr;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <div>
                <h1>API服务调用统计</h1>
                <p class="subtitle">标准地址信息服务API调用监控</p>
            </div>
        </header>
        
        <div class="time-filter">
            <div class="time-buttons">
                <button class="time-button">今日</button>
                <button class="time-button active">7天</button>
                <button class="time-button">30天</button>
                <button class="time-button">本季度</button>
            </div>
            <div>
                <button class="refresh-button">
                    <i class="fas fa-sync-alt"></i> 刷新
                </button>
                <span class="last-updated">上次更新: 2025-03-27 15:30:45</span>
            </div>
        </div>
        
        <div class="overview-cards">
            <div class="overview-card">
                <div class="overview-card-title">总调用次数</div>
                <div class="overview-card-value">1,285,476</div>
                <div class="overview-card-percent percent-up">
                    <i class="fas fa-arrow-up"></i> 12.5% 与上周比
                </div>
            </div>
            <div class="overview-card">
                <div class="overview-card-title">平均响应时间</div>
                <div class="overview-card-value">82 ms</div>
                <div class="overview-card-percent percent-down">
                    <i class="fas fa-arrow-down"></i> 5.2% 与上周比
                </div>
            </div>
            <div class="overview-card">
                <div class="overview-card-title">成功率</div>
                <div class="overview-card-value">99.8%</div>
                <div class="overview-card-percent percent-up">
                    <i class="fas fa-arrow-up"></i> 0.2% 与上周比
                </div>
            </div>
            <div class="overview-card">
                <div class="overview-card-title">活跃客户端</div>
                <div class="overview-card-value">47</div>
                <div class="overview-card-percent percent-up">
                    <i class="fas fa-arrow-up"></i> 4 个新客户端
                </div>
            </div>
        </div>
        
        <div class="chart-cards">
            <div class="chart-card">
                <div class="chart-title">API调用趋势</div>
                <div class="chart-container">
                    <canvas id="callTrendsChart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <div class="chart-title">调用接口分布</div>
                <div class="pie-chart-container">
                    <canvas id="endpointDistributionChart"></canvas>
                </div>
            </div>
        </div>
        
        <div class="two-columns">
            <div class="chart-card">
                <div class="chart-title">客户端调用量排名</div>
                <div class="chart-container">
                    <canvas id="clientCallsChart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <div class="chart-title">错误类型分布</div>
                <div class="pie-chart-container">
                    <canvas id="errorDistributionChart"></canvas>
                </div>
            </div>
        </div>
        
        <div class="table-card">
            <div class="chart-title">最近API调用记录</div>
            <table class="api-table">
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>客户端</th>
                        <th>接口</th>
                        <th>响应时间</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2025-03-27 15:28:45</td>
                        <td>移动端应用</td>
                        <td>/api/address/standardize</td>
                        <td>76 ms</td>
                        <td><span class="status-badge status-success">成功</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:40</td>
                        <td>供热监控系统</td>
                        <td>/api/address/search</td>
                        <td>124 ms</td>
                        <td><span class="status-badge status-success">成功</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:35</td>
                        <td>燃气系统</td>
                        <td>/api/address/validate</td>
                        <td>68 ms</td>
                        <td><span class="status-badge status-success">成功</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:30</td>
                        <td>市政服务平台</td>
                        <td>/api/address/standardize</td>
                        <td>92 ms</td>
                        <td><span class="status-badge status-success">成功</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:25</td>
                        <td>市政服务平台</td>
                        <td>/api/address/batch</td>
                        <td>312 ms</td>
                        <td><span class="status-badge status-warning">超时</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:20</td>
                        <td>移动端应用</td>
                        <td>/api/address/detail</td>
                        <td>85 ms</td>
                        <td><span class="status-badge status-success">成功</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:15</td>
                        <td>城建信息系统</td>
                        <td>/api/address/search</td>
                        <td>105 ms</td>
                        <td><span class="status-badge status-success">成功</span></td>
                    </tr>
                    <tr>
                        <td>2025-03-27 15:28:10</td>
                        <td>公共服务平台</td>
                        <td>/api/address/validate</td>
                        <td>-</td>
                        <td><span class="status-badge status-error">参数错误</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 调用趋势图表
            const trendCtx = document.getElementById('callTrendsChart').getContext('2d');
            const callTrendsChart = new Chart(trendCtx, {
                type: 'line',
                data: {
                    labels: ['12-21', '12-22', '12-23', '12-24', '12-25', '12-26', '12-27'],
                    datasets: [{
                        label: '调用次数',
                        data: [185421, 172654, 163890, 152347, 168542, 190765, 251857],
                        borderColor: '#3498db',
                        backgroundColor: 'rgba(52, 152, 219, 0.1)',
                        tension: 0.3,
                        fill: true
                    }, {
                        label: '错误次数',
                        data: [235, 312, 276, 198, 243, 287, 352],
                        borderColor: '#e74c3c',
                        backgroundColor: 'rgba(231, 76, 60, 0.1)',
                        tension: 0.3,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
            
            // 接口分布饼图
            const pieCtx = document.getElementById('endpointDistributionChart').getContext('2d');
            const endpointDistributionChart = new Chart(pieCtx, {
                type: 'doughnut',
                data: {
                    labels: ['标准化接口', '查询接口', '验证接口', '详情接口', '批量接口'],
                    datasets: [{
                        data: [42, 28, 15, 10, 5],
                        backgroundColor: [
                            '#3498db',
                            '#2ecc71',
                            '#f39c12',
                            '#9b59b6',
                            '#1abc9c'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
            
            // 客户端调用量柱状图
            const clientCtx = document.getElementById('clientCallsChart').getContext('2d');
            const clientCallsChart = new Chart(clientCtx, {
                type: 'bar',
                data: {
                    labels: ['移动端应用', '供热系统', '燃气系统', '城建系统', '公共服务'],
                    datasets: [{
                        label: '调用次数',
                        data: [352641, 298754, 246521, 189765, 147895],
                        backgroundColor: '#3498db'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    indexAxis: 'y',
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
            
            // 错误分布饼图
            const errorCtx = document.getElementById('errorDistributionChart').getContext('2d');
            const errorDistributionChart = new Chart(errorCtx, {
                type: 'doughnut',
                data: {
                    labels: ['参数错误', '认证失败', '服务超时', '限流拦截', '其他错误'],
                    datasets: [{
                        data: [45, 25, 15, 10, 5],
                        backgroundColor: [
                            '#e74c3c',
                            '#f39c12',
                            '#9b59b6',
                            '#34495e',
                            '#7f8c8d'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right'
                        }
                    }
                }
            });
            
            // 时间过滤按钮点击事件
            const timeButtons = document.querySelectorAll('.time-button');
            timeButtons.forEach(button => {
                button.addEventListener('click', function() {
                    timeButtons.forEach(btn => btn.classList.remove('active'));
                    this.classList.add('active');
                    // 这里应该添加实际的数据过滤逻辑
                });
            });
            
            // 刷新按钮点击事件
            document.querySelector('.refresh-button').addEventListener('click', function() {
                // 这里应该添加数据刷新的逻辑
                const now = new Date();
                document.querySelector('.last-updated').textContent = 
                    `上次更新: ${now.getFullYear()}-${String(now.getMonth()+1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
            });
        });
    </script>
</body>
</html> 